<%--
  Created by IntelliJ IDEA.
  User: SAMSUNG
  Date: 2020/2/27
  Time: 14:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <!-- X-UA-Compatible 用来设置 IE 浏览器的兼容模式 -->
    <!-- 其中 Edge 模式告诉 IE 浏览器使用其所支持的最高级渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>疫情数据录入</title>

    <!-- Bootstrap -->
    <jsp:include page="../templates/bootstrap_common.jsp"></jsp:include>

    <!-- 日期选择器 -->
    <link rel="stylesheet" type="text/css" href="../bootstrap/datepicker/bootstrap-datepicker3.css">


</head>
<body>
<!-- 经典后台管理布局 -->
<div class="container">
    <!-- logo-header -->
    <jsp:include page="../templates/top.jsp"></jsp:include>

    <div class="row">
        <div class="col-md-3">
            <!-- menu -->
            <jsp:include page="../templates/menu.jsp"></jsp:include>
        </div>
        <!-- 菜单对应内容 -->
        <div class="col-md-9">
            <!-- 面包屑导航 -->
            <ul class="breadcrumb">
                <li><a href="${pageContext.request.contextPath}/main.jsp">主页</a></li>
                <li class="active">数据录入</li>
            </ul>
            <!-- 数据日期选择 -->
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group date" id="datepicker" data-date-format="yyyy-mm-dd">
                        <div class="input-group-addon">数据日期</div>
                        <input class="form-control" size="16" type="text" value="" id="dataDate" readonly>
                        <div class="input-group-addon">
                            <span class="add-on glyphicon glyphicon-calendar"></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-primary" id="btnSubmit">提交 <span
                            class="glyphicon glyphicon-log-in"></span></button>
                </div>
            </div>
            <br>
            <div class="row">
                <!-- 隔行变色，鼠标选定效果，边框 -->
                <table class="table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>省份</th>
                        <th>确诊人数</th>
                        <th>疑似人数</th>
                        <th>隔离人数</th>
                        <th>治愈人数</th>
                        <th>死亡人数</th>
                    </tr>
                    </thead>
                    <thead>
                    <tbody id="tbody1">
                    <%--                    <tr>--%>
                    <%--                        <td>湖北</td>--%>
                    <%--                        <!-- 设置长度，form-control使鼠标选择文本框后变蓝 -->--%>
                    <%--                        <td><input type="text" name="affirmed" size="4" maxlength="4" class="form-control"></td>--%>
                    <%--                        <td><input type="text" name="suspected" size="4" maxlength="4" class="form-control"></td>--%>
                    <%--                        <td><input type="text" name="isolated" size="4" maxlength="4" class="form-control"></td>--%>
                    <%--                        <td><input type="text" name="cured" size="4" maxlength="4" class="form-control"></td>--%>
                    <%--                        <td><input type="text" name="dead" size="4" maxlength="4" class="form-control"></td>--%>
                    <%--                    </tr>--%>
                    </tbody>
                    </thead>
                </table>
            </div>
            <div class="row">
                <div id="msg"></div>
            </div>
        </div>
    </div>

    <div class="row">第三行</div>
</div>
<!-- 放在body里是为了加快页面的加载 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- jquery-1.x系列支持所有浏览器 -->
<script src="${pageContext.request.contextPath}/bootstrap/js/jquery-1.11.2.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件 -->
<script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
<!-- 日期选择器依赖jquery -->
<script type="text/javascript"
        src="${pageContext.request.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script type="text/javascript"
        src="${pageContext.request.contextPath}/bootstrap/datepicker/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript">

    var provinces = null;//存放省份信息
    /*页面加载后执行的方法*/
    $(function () {
        /*定义一个常量存储节点*/
        var datepicker = $("#datepicker");
        /*设置日期选择器的属性*/
        datepicker.datepicker({
            autoclose: true,
            todayHighlight: true,
            language: "zh-CN"
        });
        /*初始化日期，并限定日期选择器范围为从当天往前算的7天*/
        var current = new Date();
        datepicker.datepicker("setDate", current);
        var date1 = new Date();
        date1.setDate(current.getDate() - 7);
        datepicker.datepicker("setStartDate", date1);
        datepicker.datepicker("setEndDate", current);
        //用户重新选择日期后需重新装载省份列表，给日期选择器设置事件处理器
        datepicker.datepicker().on("changeDate", loadProvinceList);
        //装载省份列表
        loadProvinceList();
        //给提交按钮绑定事件处理函数
        $("#btnSubmit").click(checkAndSubmitData);
    });

    //检查并提交数据
    function checkAndSubmitData() {
        var valid = true;//默认所有数据都合法
        var affirmed = $("input[name=affirmed]");
        var suspected = $("input[name=suspected]");
        var isolated = $("input[name=isolated]");
        var cured = $("input[name=cured]");
        var dead = $("input[name=dead]");

        //获取确诊人数一列的数据
        affirmed.each(function (index, element) {
            //检查数据是否有效
            if (isNaN(Number(element.value)) || Number(element.value) < 0) {//如果存在无效数据
                valid = false;
            }
        });
        //获取疑似人数一列的数据
        suspected.each(function (index, element) {
            //检查数据是否有效
            if (isNaN(Number(element.value)) || Number(element.value) < 0) {//如果存在无效数据
                valid = false;
            }
        });
        //获取隔离人数一列的数据
        isolated.each(function (index, element) {
            //检查数据是否有效
            if (isNaN(Number(element.value)) || Number(element.value) < 0) {//如果存在无效数据
                valid = false;
            }
        });
        //获取治愈人数一列的数据
        cured.each(function (index, element) {
            //检查数据是否有效
            if (isNaN(Number(element.value)) || Number(element.value) < 0) {//如果存在无效数据
                valid = false;
            }
        });
        //获取死亡人数一列的数据
        dead.each(function (index, element) {
            //检查数据是否有效
            if (isNaN(Number(element.value)) || Number(element.value) < 0) {//如果存在无效数据
                valid = false;
            }
        });
        if (valid) {//所有数据合法，提交数据
            var dataArray = [];
            for (var i = 0; i < provinces.length; i++) {
                //把省份信息封装成一个对象
                var obj = {};
                obj.provinceId = provinces[i].provinceId;
                obj.affirmed = affirmed.get(i).value;
                obj.suspected = suspected.get(i).value;
                obj.isolated = isolated.get(i).value;
                obj.cured = cured.get(i).value;
                obj.dead = dead.get(i).value;
                dataArray.push(obj);
                //console.info(dataArray);
                //获取当日日期
                var date=$("#dataDate").val();
            }
        } else {//存在非法数据
            alert("请检查你的输入，确保输入有效数值！")
        }
    }

    function loadProvinceList() {
        //清空表格数据
        var tbody1 = $("#tbody1");
        tbody1.empty();
        //获取日期框里的值
        var date = $("#dataDate").val();


        //从服务器端获取未录入数据的省份列表
        //get请求，参数为：URL请求路径，请求参数，回调函数，服务器端返回数据的格式
        $.get("${pageContext.request.contextPath}/province/ajax/noDataList", {date: date}, function (response) {
            if (response.code < 0) {//异常
                alert(response.msg);
            } else {//正常响应，填充表格
                fillProvinceToTable(response.data);
            }
        }, "json");
    }

    //填充表格
    function fillProvinceToTable(array) {
        if (array && array.length > 0) {//好友省份未录入信息
            provinces = array;
            //填充到表格中
            var tbody1 = $("#tbody1")
            $.each(array, function (index, province) {
                var tr = $("<tr>");
                var td = $("<td>");
                td.text(province.provinceName);
                tr.append(td);

                var td = $("<td>");
                td.html('<input type="text" name="affirmed" size="4" maxlength="4" class="form-control" value="0">')
                tr.append(td);

                var td = $("<td>");
                td.html('<input type="text" name="suspected" size="4" maxlength="4" class="form-control" value="0">')
                tr.append(td);

                var td = $("<td>");
                td.html('<input type="text" name="isolated" size="4" maxlength="4" class="form-control" value="0">')
                tr.append(td);

                var td = $("<td>");
                td.html('<input type="text" name="cured" size="4" maxlength="4" class="form-control" value="0">')
                tr.append(td);

                var td = $("<td>");
                td.html('<input type="text" name="dead" size="4" maxlength="4" class="form-control" value="0">')
                tr.append(td);

                tbody1.append(tr);
            })
        } else {//所有省份已录入信息
            //alert()
            $("#msg").html("所有省份都已录入了数据！")
        }
    }
</script>
</body>
</html>
